<template>
  <div class="home h100">
    <header>
        我是标题
    </header>
    <main>
        <router-view/>
    </main>
    <footer>
        <router-link 
            v-for="(item, index) in list"
            :to="item.path"
            tag="span"
            active-class="active"
            :key="index"
            >
                {{ item.title }}
        </router-link>
    </footer>
  </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    path: "/home/homes",
                    title: "首页"
                },
                {
                    path: "/home/list",
                    title: "列表"
                },
                {
                    path: "/home/server",
                    title: "服务"
                },
                {
                    path: "/home/my",
                    title: "我的"
                }
            ]
        }
    }
}
</script>

<style>
.home {
    display: flex;
    flex-direction:column;
}

header {
    text-align: center;
    line-height: 46px;
    font-size: 20px;
    font-weight: 600;
}

main {
    flex: 1;
}

footer {
    text-align: center;
    line-height: 46px;
    display: flex;
}

footer span {
    flex: 1;
}
</style>